<template>
  <div>
    <el-card class="search-card" v-loading="formLoading">
      <BasicForm
        v-if="!formLoading"
        ref="formData"
        formItemWidth="120px"
        :formColumns="formItemList"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <BasicTable
        :defaultMinWidth="100"
        showPagination
        :dataSource="tableInfo.list"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :tableHeight="480"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="total"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      >
        <div slot="content_context">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-download"
            :loading="exportLoading"
            @click="exportCategory"
          >导出</el-button
          >
        </div>
      </BasicTable>
    </el-card>
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import BasicTable from '@/components/skusTable';
import skusPage from '@/mixins/commodity/skusPage';
import { initFormItemList, TABLE_COLUMNS } from './constants';
import { setAuthBtnId, createExcelByExport } from '@/utils/bizUtils';
import { querypriceCycleListService, exportpriceCycleListService } from '@/api/finance/priceCycleManage/priceCycle';
import { queryAreaListService } from '@/api/public';

export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    BasicTable,
  },
  data () {
    return {
      formLoading: false,
      formItemList: initFormItemList(),
      formData: {
        supplyNoOrName: '',
        skuNo: '',
        manageAreaUuid: '',
        supplyManageAreaUuid: '',
      },
      tableInfo: {
        list: [],
        columns: TABLE_COLUMNS,
        loading: false,
        selection: []
      },
      pageSizes: [10, 100, 1000]
    }
  },
  mounted () {
    this.getBusinessAreaList()
    this.getTableData()
  },
  methods: {
    // 获取业务区域
    async getBusinessAreaList () {
      const res = await queryAreaListService({}, (state) => { this.formLoading = state });
      if (res?.retData) {
        const areaList = res.retData.map(item => {
          return {
            value: item.areaCode,
            label: item.areaName
          }
        })
        this.formItemList = initFormItemList(areaList)
      }
    },
    // 获取表格数据
    async getTableData () {
      setAuthBtnId();
      const res = await querypriceCycleListService(
        { ...this.formData, ...this.paginationParams },
        state => { this.tableInfo.loading = state }
      );
      if (res?.retData) {
        this.tableInfo.list = res.retData.results;
        this.total = res.retData.totalNum;
      }
    },
    // 导出信息数据
    async exportCategory () {
      const res = await exportpriceCycleListService(
        this.formData,
        state => { this.exportLoading = state; }
      );
      createExcelByExport({ res, excelTitle: '价格管理周期数据源' });
    }
  }
}
</script>
